<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-paper" color="red" size="18"></Icon> 基本资料
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	            仓库管理
	        </BreadcrumbItem>
	    </Breadcrumb>
	    <Button class="addBtn" @click="addStore" v-if="userType==0">新增仓库</Button>
	    <Input search enter-button="搜索" placeholder="请输入仓库名字..." v-model="search" class="search-input" @on-search="searchWarehouse"/>
	    <Table height="480" :columns="columns1" :data="datas">
	    	 <template slot-scope="{ row, index }" slot="action">
	            <Button type="primary" style="margin-right: 5px" @click="edit(row)" v-if="userType==0">修改</Button>
	            <Button type="error" @click="remove(row)">删除</Button>
	        </template>
	    </Table>
	    <Modal
        title="请按要求完善表单"
        v-model="modelShow"
        :closable="false" @on-ok="checkSure" @on-cancel="handleReset('formValidate')" :styles="{top: '20px'}">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
		        <FormItem label="仓库名称" prop="name">
		            <Input v-model="formValidate.name" placeholder="请输入仓库名称"></Input>
		        </FormItem>
		        <FormItem label="仓库类型" prop="type">
		            <Input v-model="formValidate.type" placeholder="请输入仓库类型"></Input>
		        </FormItem>
		        <FormItem label="仓库管理员" prop="manager">
		            <Select v-model="formValidate.manager">
		                <Option :value="list.userId" v-for="(list,index) in managerList" :key="index">{{list.nickName}}</Option>
		            </Select>
		        </FormItem>
		    </Form>
	    </Modal>
	    <Modal
        title="请按要求完善表单(修改)"
        v-model="modelEdit"
        :closable="false" @on-ok="checkSure1" @on-cancel="handleReset('formValidate1')" :styles="{top: '20px'}">
	        <Form ref="formValidate1" :model="formValidate1" :rules="ruleValidate1" :label-width="100">
		        <FormItem label="仓库名称" prop="name">
		            <Input v-model="formValidate1.name" placeholder="请输入仓库名称"></Input>
		        </FormItem>
		        <FormItem label="仓库类型" prop="type">
		            <Input v-model="formValidate1.type" placeholder="请输入仓库类型"></Input>
		        </FormItem>
		        <FormItem label="仓库管理员" prop="manager">
		            <Select v-model="formValidate1.manager">
		                <Option :value="list.userId" v-for="(list,index) in managerList" :key="index">{{list.nickName}}</Option>
		            </Select>
		        </FormItem>
		    </Form>
	    </Modal>
	</div>
</template>

<script>
	export default{
		name:'storeHouseManager',
		data(){
			return{
				modelShow:false,//新增弹窗
				modelEdit:false,//修改弹窗
				formValidate: {
                    name: '',
                    type:'',
                    manager:''
                },
                ruleValidate: {//表单校验规则
                    name: [
                        { required: true, message: '仓库名字不能为空', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请输入仓库类型', trigger: 'blur' }
                    ],
                    manager: [
                        { required: true, message: '请选择仓库管理员', trigger: 'blur' }
                    ]
                },
				formValidate1: {
                    name: '',
                    type:'',
                    manager:''
                },
                ruleValidate1: {//表单校验规则
                    name: [
                        { required: true, message: '仓库名字不能为空', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请输入仓库类型', trigger: 'blur' }
                    ],
                    manager: [
                        { required: true, message: '请选择仓库管理员', trigger: 'blur' }
                    ]
                },
				columns1: [//表头
                   {
                        title: '仓库编号',
                        key: 'warehouseCode'
                    },
                    {
                        title: '仓库名称',
                        key: 'warehouseName'
                    },
                    {
                        title: '仓库管理员',
                        key: 'warehouseUserName'
                    },
                    {
                        title: '日期',
                        key: 'createTime'
                    },
                    {
                    	title:'操作',
                    	slot:'action'
                    }
                ],
				datas:[],//表格数据
				managerList:[],
				search:'',
				editRow:null,
				userType:0
			}
		},
		methods:{
			addStore(){//新增仓库
				this.modelShow = true
			},
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSubmit(name) {//验证表单
               this.$refs[name].validate((valid) => {
                    if (valid) {//验证通过
                    	if( name == 'formValidate'){
                    		this.addWarehouse()
                    	}else{
                    		this.editThisWarehouse()
                    	}
                    } else {//验证不通过
                        this.$Message.error('请按要求完善表单!');
                        if(name == 'formValidate'){
                       		this.handleReset('formValidate')
                    	}else{
                       		this.handleReset('formValidate1')
                    	}
                    }
                })
            },
			checkSure(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate')
			},
			checkSure1(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate1')
			},
			goSearch(value){//搜索方法 点击搜索、或者按回车键都能触发
				alert(value)
			},
			addWarehouse(){//新增仓库
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/addWarehouse',
	    			data:{
	    				userId:that.formValidate.manager,
	    				warehouseType:that.formValidate.type,
	    				warehouseName:that.formValidate.name
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.$Message.success(res.data.msg);
	    				this.getWarehouse()
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			edit(row){//点击修改按钮
				this.editRow = row
				this.formValidate1.name = row.warehouseName
				this.formValidate1.type = row.warehouseType
				this.modelEdit = true
			},
			editThisWarehouse(){//编辑仓库
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/modifyWarehouse',
	    			data:{
	    				warehouseUserId:that.formValidate1.manager,
	    				warehouseId:that.editRow.warehouseId,
	    				warehouseType:that.formValidate1.type,
	    				warehouseName:that.formValidate1.name
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.$Message.success(res.data.msg);
	    				this.getWarehouse()
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getUserList(){//获取管理员列表
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getUser',
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			this.managerList = []
	    			if(res.data.code == 200){
	    				this.managerList = res.data.userList
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			remove(row){//删除仓库
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/deleteWarehouse',
	    			data:{
	    				warehouseId:row.warehouseId
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.$Message.success(res.data.msg);
	    				this.getWarehouse()
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			searchWarehouse(){//查找仓库
				if(this.search==""){this.getWarehouse();return}
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/selectWarehouseName',
	    			data:{
	    				warehouseName:that.search
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.$Message.success(res.data.msg);
	    				this.datas=[]
	    				res.data.departmentList.forEach(item=>{
	    					this.datas.push(item)
	    				})
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getWarehouse(){ // 获取仓库列表
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getWarehouse',
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.datas=[]
	    				res.data.warehouseList.forEach(item=>{
	    					this.datas.push(item)
	    				})
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
		},
		created(){
			this.userType=this.LS.getLS('userType')
			this.getUserList()
			this.getWarehouse()
		}
	}
</script>

<style scoped>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.addBtn{
	position: absolute;
	top: -10px;
	right: 20px;
}
.page-nav{
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 10px;
}
.search-input{
	width:40%;
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
</style>